<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebXR功能测试 - Vision Pro AI诗人</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            min-height: 100vh;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }
        
        h1 {
            text-align: center;
            margin-bottom: 30px;
            font-size: 2.5em;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .test-section {
            margin: 20px 0;
            padding: 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .test-title {
            font-size: 1.3em;
            font-weight: 600;
            margin-bottom: 15px;
            color: #fff;
        }
        
        .test-result {
            padding: 10px;
            border-radius: 8px;
            margin: 10px 0;
            font-family: 'Monaco', 'Menlo', monospace;
            font-size: 0.9em;
        }
        
        .success {
            background: rgba(76, 175, 80, 0.3);
            border: 1px solid rgba(76, 175, 80, 0.5);
        }
        
        .error {
            background: rgba(244, 67, 54, 0.3);
            border: 1px solid rgba(244, 67, 54, 0.5);
        }
        
        .info {
            background: rgba(33, 150, 243, 0.3);
            border: 1px solid rgba(33, 150, 243, 0.5);
        }
        
        .warning {
            background: rgba(255, 193, 7, 0.3);
            border: 1px solid rgba(255, 193, 7, 0.5);
        }
        
        .test-button {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: 2px solid rgba(255, 255, 255, 0.3);
            color: white;
            padding: 12px 24px;
            border-radius: 12px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            margin: 10px 5px;
            transition: all 0.3s ease;
        }
        
        .test-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
        }
        
        .device-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }
        
        .info-card {
            background: rgba(255, 255, 255, 0.1);
            padding: 15px;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .info-label {
            font-weight: 600;
            color: #fff;
            margin-bottom: 5px;
        }
        
        .info-value {
            color: #e0e0e0;
            font-family: 'Monaco', 'Menlo', monospace;
            font-size: 0.9em;
        }
        
        #vr-button-container {
            text-align: center;
            margin: 30px 0;
        }
        
        .back-link {
            display: inline-block;
            margin-top: 30px;
            padding: 12px 24px;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            text-decoration: none;
            border-radius: 12px;
            transition: all 0.3s ease;
        }
        
        .back-link:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🥽 WebXR功能测试</h1>
        
        <div class="test-section">
            <div class="test-title">🔍 设备检测</div>
            <div id="device-detection"></div>
            <div class="device-info" id="device-info"></div>
        </div>
        
        <div class="test-section">
            <div class="test-title">🌐 WebXR支持检测</div>
            <div id="webxr-support"></div>
        </div>
        
        <div class="test-section">
            <div class="test-title">🎮 WebXR会话测试</div>
            <div id="webxr-session"></div>
            <button class="test-button" onclick="testWebXRSession()">测试WebXR会话</button>
        </div>
        
        <div class="test-section">
            <div class="test-title">📱 交互控制测试</div>
            <div id="controls-test"></div>
            <button class="test-button" onclick="testControls()">测试控制器</button>
        </div>
        
        <div style="text-align: center;">
            <a href="/" class="back-link">← 返回主页面</a>
        </div>
    </div>

    <script>
        // 全局变量
        let isVisionPro = false;
        let isMobile = false;

        // 设备检测
        function detectDevice() {
            const userAgent = navigator.userAgent.toLowerCase();
            const isAppleDevice = /iphone|ipad|ipod|macintosh/.test(userAgent);
            const hasSafari = /safari/.test(userAgent) && !/chrome/.test(userAgent);
            const hasWebXR = 'xr' in navigator;
            
            // Vision Pro检测
            isVisionPro = (
                isAppleDevice &&
                hasSafari &&
                hasWebXR &&
                window.screen.width >= 3840 &&
                'ontouchstart' in window
            );
            
            // 移动设备检测
            isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
            
            const deviceInfo = {
                'User Agent': navigator.userAgent,
                '屏幕分辨率': `${window.screen.width} x ${window.screen.height}`,
                '设备像素比': window.devicePixelRatio,
                '是否Apple设备': isAppleDevice,
                '是否Safari': hasSafari,
                '是否支持触摸': 'ontouchstart' in window,
                '是否Vision Pro': isVisionPro,
                '是否移动设备': isMobile,
                'WebXR支持': hasWebXR
            };
            
            displayDeviceInfo(deviceInfo);
            
            return {
                isVisionPro,
                isMobile,
                isAppleDevice,
                hasSafari,
                hasWebXR
            };
        }

        function displayDeviceInfo(info) {
            const container = document.getElementById('device-info');
            container.innerHTML = '';
            
            Object.entries(info).forEach(([key, value]) => {
                const card = document.createElement('div');
                card.className = 'info-card';
                card.innerHTML = `
                    <div class="info-label">${key}</div>
                    <div class="info-value">${value}</div>
                `;
                container.appendChild(card);
            });
            
            const detectionResult = document.getElementById('device-detection');
            if (isVisionPro) {
                detectionResult.innerHTML = '<div class="test-result success">✅ 检测到Vision Pro设备</div>';
            } else if (isMobile) {
                detectionResult.innerHTML = '<div class="test-result info">📱 检测到移动设备</div>';
            } else {
                detectionResult.innerHTML = '<div class="test-result info">🖥️ 检测到桌面设备</div>';
            }
        }

        // WebXR支持检测
        async function checkWebXRSupport() {
            const container = document.getElementById('webxr-support');
            
            if (!('xr' in navigator)) {
                container.innerHTML = '<div class="test-result error">❌ 浏览器不支持WebXR</div>';
                return false;
            }
            
            try {
                const isSupported = await navigator.xr.isSessionSupported('immersive-vr');
                if (isSupported) {
                    container.innerHTML = '<div class="test-result success">✅ 支持WebXR沉浸式VR会话</div>';
                } else {
                    container.innerHTML = '<div class="test-result warning">⚠️ 浏览器支持WebXR但不支持沉浸式VR</div>';
                }
                
                // 检查其他会话类型
                const arSupported = await navigator.xr.isSessionSupported('immersive-ar');
                const inlineSupported = await navigator.xr.isSessionSupported('inline');
                
                if (arSupported) {
                    container.innerHTML += '<div class="test-result success">✅ 支持WebXR沉浸式AR会话</div>';
                }
                if (inlineSupported) {
                    container.innerHTML += '<div class="test-result info">ℹ️ 支持WebXR内联会话</div>';
                }
                
                return isSupported;
            } catch (error) {
                container.innerHTML = `<div class="test-result error">❌ WebXR检测失败: ${error.message}</div>`;
                return false;
            }
        }

        // WebXR会话测试
        window.testWebXRSession = async function() {
            const container = document.getElementById('webxr-session');
            
            if (!('xr' in navigator)) {
                container.innerHTML = '<div class="test-result error">❌ 浏览器不支持WebXR</div>';
                return;
            }
            
            try {
                container.innerHTML = '<div class="test-result info">🔄 正在请求WebXR会话...</div>';
                
                const session = await navigator.xr.requestSession('immersive-vr');
                container.innerHTML = '<div class="test-result success">✅ WebXR会话创建成功！</div>';
                
                // 监听会话事件
                session.addEventListener('end', () => {
                    container.innerHTML += '<div class="test-result info">ℹ️ WebXR会话已结束</div>';
                });
                
                // 自动结束会话（测试用）
                setTimeout(() => {
                    session.end();
                }, 3000);
                
            } catch (error) {
                container.innerHTML = `<div class="test-result error">❌ WebXR会话创建失败: ${error.message}</div>`;
                
                if (error.name === 'NotAllowedError') {
                    container.innerHTML += '<div class="test-result warning">⚠️ 用户拒绝了WebXR权限请求</div>';
                } else if (error.name === 'NotSupportedError') {
                    container.innerHTML += '<div class="test-result warning">⚠️ 设备不支持WebXR沉浸式VR</div>';
                }
            }
        };

        // 控制器测试
        window.testControls = function() {
            const container = document.getElementById('controls-test');
            
            const controlsInfo = {
                '设备类型': isVisionPro ? 'Vision Pro' : (isMobile ? '移动设备' : '桌面设备'),
                '鼠标控制': !isMobile ? '左键旋转，中键缩放，右键平移' : '不适用',
                '触摸控制': isMobile ? '单指旋转，双指缩放平移' : '不适用',
                '键盘控制': '方向键控制视角',
                '阻尼系数': isVisionPro ? '0.03 (超平滑)' : (isMobile ? '0.08 (快速响应)' : '0.05 (标准)'),
                '缩放范围': isVisionPro ? '2-20' : (isMobile ? '3-15' : '1-25')
            };
            
            container.innerHTML = '';
            Object.entries(controlsInfo).forEach(([key, value]) => {
                if (value !== '不适用') {
                    container.innerHTML += `<div class="test-result info">${key}: ${value}</div>`;
                }
            });
        };

        // 页面加载时执行检测
        document.addEventListener('DOMContentLoaded', () => {
            detectDevice();
            checkWebXRSupport();
        });
    </script>
</body>
</html>